import React, { PureComponent } from "react";
import "./index.scss";
import {
  PageHeader,
  Button,
  Form,
  Input,
  Select,
  Upload,
  Modal,
  Checkbox,
  Row,
  Col,
} from "antd";
import { Link } from "react-router-dom";
import { FileImageOutlined, LockOutlined } from "@ant-design/icons";

const { Option } = Select;

//表单布局
const layout = {
  labelCol: {
    span: 8,
  },
  wrapperCol: {
    span: 16,
  },
};
const tailLayout = {
  wrapperCol: {
    offset: 8,
    span: 16,
  },
};

const routes = [
  {
    path: "index",
    breadcrumbName: "设置",
  },
  {
    path: "first",
    breadcrumbName: "Banner图管理",
  },
];

export default class ImgChild extends PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      previewVisible: false,
      previewImage: "",
      fileList: [
        {
          uid: -1,
          name: "xxx.png",
          status: "done",
          url: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",
        },
      ],
    };
  }

  handleCancel = () => this.setState({ previewVisible: false });

  handlePreview = (file) => {
    this.setState({
      previewImage: file.url || file.thumbUrl,
      previewVisible: true,
    });
  };

  handleChange = ({ fileList }) => this.setState({ fileList });

  formRef = React.createRef();

  formRef = React.createRef();
  onGenderChange = (value) => {
    switch (value) {
      case "male":
        this.formRef.current.setFieldsValue({
          note: "Hi, man!",
        });
        return;

      case "female":
        this.formRef.current.setFieldsValue({
          note: "Hi, lady!",
        });
        return;

      case "other":
        this.formRef.current.setFieldsValue({
          note: "Hi there!",
        });
    }
  };
  onFinish = (values) => {
    console.log(values);
  };
  onReset = () => {
    this.formRef.current.resetFields();
  };
  onFill = () => {
    this.formRef.current.setFieldsValue({
      note: "Hello world!",
      gender: "male",
    });
  };

  render() {
    const { previewVisible, previewImage, fileList } = this.state;
    const uploadButton = (
      <div>
        <FileImageOutlined />
        <div className="ant-upload-text">点击上传</div>
      </div>
    );

    return (
      <>
        <div className="Header">
          <PageHeader
            className="site-page-header"
            title="Banner图管理"
            breadcrumb={{
              routes,
            }}
          />
        </div>

        <div className="Content ">
          <div className="flex2">
            <div className="Content-left">
              <h3 className="Advertising-Banner-List">基础信息</h3>
            </div>
          </div>

          <Form
            {...layout}
            ref={this.formRef}
            name="control-ref"
            onFinish={this.onFinish}
          >
            <Form.Item
              label="员工姓名"
              rules={[
                {
                  required: true,
                },
              ]}
            >
              <Input placeholder="请输入" />
            </Form.Item>
            <Form.Item
              label="登录账号"
              rules={[
                {
                  required: true,
                },
              ]}
            >
              <Input placeholder="请输入" />
            </Form.Item>

            {/* <Form.Item
              noStyle
              shouldUpdate={(prevValues, currentValues) =>
                prevValues.gender !== currentValues.gender
              }
            >
              {({ getFieldValue }) =>
                getFieldValue("gender") === "other" ? (
                  <Form.Item
                    name="customizeGender"
                    label="Customize Gender"
                    rules={[
                      {
                        required: true,
                      },
                    ]}
                  >
                    <Input />
                  </Form.Item>
                ) : null
              }
            </Form.Item> */}

            <div className="uploadImg">
              <div>
                <span className="message">员工头像:</span>
              </div>
              <div className="imges">
                <Upload
                  action="//jsonplaceholder.typicode.com/posts/"
                  listType="picture-card"
                  fileList={fileList}
                  onPreview={this.handlePreview}
                  onChange={this.handleChange}
                >
                  {fileList.length >= 3 ? null : uploadButton}
                </Upload>
                <Modal
                  visible={previewVisible}
                  footer={null}
                  onCancel={this.handleCancel}
                >
                  <img
                    alt="example"
                    style={{ width: "100%" }}
                    src={previewImage}
                  />
                </Modal>
              </div>
            </div>
            <Form.Item label="员工角色">
              <Select placeholder="请选择">
                <Checkbox.Group>
                  <Row>
                    <Col span={8}>
                      <Checkbox
                        value="管理员"
                        style={{
                          lineHeight: "32px",
                        }}
                      >
                        管理员
                      </Checkbox>
                    </Col>
                    <Col span={8}>
                      <Checkbox
                        value="老师"
                        style={{
                          lineHeight: "32px",
                        }}
                      >
                        老师
                      </Checkbox>
                    </Col>
                    <Col span={8}>
                      <Checkbox
                        value="课程顾问"
                        style={{
                          lineHeight: "32px",
                        }}
                      >
                        课程顾问
                      </Checkbox>
                    </Col>
                    <Col span={8}>
                      <Checkbox
                        value="助教"
                        style={{
                          lineHeight: "32px",
                        }}
                      >
                        助教
                      </Checkbox>
                    </Col>
                  </Row>
                </Checkbox.Group>
              </Select>
            </Form.Item>
            <div className="flex4">
              <div className="div1">
                <Form.Item
                  label="登录密码"
                  name="password"
                  rules={[
                    {
                      required: true,
                      message: "密码不能为空!",
                    },
                  ]}
                >
                  <Input
                    prefix={<LockOutlined className="site-form-item-icon" />}
                    type="password"
                    placeholder="请输入密码"
                  />
                </Form.Item>
              </div>
            </div>
            <Form.Item
              label="微信"
              rules={[
                {
                  required: true,
                },
              ]}
            >
              <Input placeholder="请输入" />
            </Form.Item>
            <Form.Item
              label="QQ"
              rules={[
                {
                  required: true,
                },
              ]}
            >
              <Input placeholder="请输入" />
            </Form.Item>
            <Form.Item
              label="邮箱"
              rules={[
                {
                  required: true,
                },
              ]}
            >
              <Input placeholder="请输入" />
            </Form.Item>
            <Form.Item name={["user", "员工介绍"]} label="员工介绍">
              <Input.TextArea placeholder="请输入" />
            </Form.Item>
            <Form.Item {...tailLayout}>
              <Button type="primary" htmlType="submit" className="suiltBtn">
                提交
              </Button>
              <Button htmlType="button" onClick={this.onReset}>
                <Link to={"/home/setting/staff"}>返回</Link>
              </Button>
            </Form.Item>
          </Form>
        </div>
      </>
    );
  }
}
